<!-- 个体户申请详情 -->
<template>
    <div>
        <div class="head">
            <div class="flex alignCenter" style="margin-bottom: 5px;">
                <div :class="'state state' + detail.state">{{employedStateFilter(detail.state)}}</div>
                <div style="margin-left: 10px;color: #666666;">{{detail.updateTime}}</div>
            </div>
            <div>{{detail.state == 1 ? '您的工商信息正在办理中，请耐心等待！' : detail.state == 2 ? '您的工商信息办理成功' : detail.failReason}}</div>
        </div>
        <div class="cont" v-if="detail.state == 1">
            <div class="resItem">企业：{{detail.laborCompanyName}}</div>
            <div class="resItem">园区：{{detail.industrialParkName}}</div>
            <div class="resItem flex">
                <div>行业：</div>
                <div>{{detail.industry}}</div>
                <div class="theme" style="margin-left: 7px;" @click="industryDetail">查看详情</div>
            </div>
            <div class="resItem">姓名：{{detail.realName}}</div>
            <div class="resItem">身份证号：{{detail.idCard}}</div>
            <div class="resItem">联系手机：{{detail.mobile}}</div>
            <div class="resItem">电子邮箱：{{detail.email}}</div>
            <div class="resItem">银行卡号：{{detail.bankCard}}</div>
            <div class="resItem">银行名称：{{detail.bankName}}</div>
            <div class="resItem">身份证正面：<span class="theme" @click="showImg(detail.idCardFront)">查看</span></div>
            <div class="resItem">身份证反面：<span class="theme" @click="showImg(detail.idCardBack)">查看</span></div>
            <div class="resItem">一寸照片：<span class="theme" @click="showImg(detail.oneInchPhoto)">查看</span></div>
        </div>
        <div class="cont" v-if="detail.state == 2">
            <div class="resItem">企业：{{detail.laborCompanyName}}</div>
            <div class="resItem">园区：{{detail.industrialParkName}}</div>
            <div class="resItem flex">
                <div>行业：</div>
                <div>{{detail.industry}}</div>
                <div class="theme" style="margin-left: 7px;" @click="industryDetail">查看详情</div>
            </div>
            <div class="resItem">营业执照：</div>
            <div class="resItem">
                <img class="businessLicense" :src="detail.businessLicense" mode=""/>
            </div>
            <div class="theme" style="text-align: center;" @click="showImg(detail.businessLicense)">查看</div>
        </div>
        <div class="cont" v-if="detail.state == 3">
            <div class="flex spaceBetween item">
                <div class="label">上传经营者身份证</div>
            </div>
            <div class="flex justifyAround">
                <van-uploader accept="media" :after-read="afterRead" name="fornt">
                    <div class="flex flexColumn center">
                        <img class="idcardImg" :src="idCardFront != '' ? idCardFront : assetsAddress + '/employed/faceImg.png'" mode=""/>
                        <div class="imgDesc">身份证人像面</div>
                    </div>
                </van-uploader>
                <van-uploader accept="media" :after-read="afterRead" name="back">
                    <div class="flex flexColumn center">
                        <img class="idcardImg" :src="idCardBack != '' ? idCardBack : assetsAddress + '/employed/backImg.png'" mode=""/>
                        <div class="imgDesc">身份证反像面</div>
                    </div>
                </van-uploader>
            </div>
            <div class="flex spaceBetween item">
                <div class="label">*拍摄须知</div>
            </div>
            <div class="flex">
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/successImg.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/fialImg1.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/fialImg2.png'" />
                </div>
                <div class="allFlex descImg">
                    <img style="width: 100%" :src="assetsAddress + '/employed/failImg3.png'" />
                </div>
            </div>
            <!-- 姓名 -->
            <van-field v-model="realName" label="姓名" placeholder="请输入姓名" :border="true" />
            <!-- 身份证号 -->
            <van-field v-model="idCard" label="身份证号" placeholder="请输入身份证号" :border="true" />
            <!-- 一寸照 -->
            <van-cell style="width: 375rpx;" title="一寸证照" isLink >
                <van-uploader accept="media" :after-read="afterRead" name="oneInch">
                    <div>{{oneInchPhoto == '' ? '上传' : '已上传'}}</div>
                </van-uploader>
            </van-cell>
            <!-- 联系手机 -->
            <van-field v-model="mobile" label="联系手机" placeholder="必须是法人本人手机，用于实名认证" :border="true" />
            <!-- 电子邮箱 -->
            <van-field v-model="email" label="电子邮箱" placeholder="用于接收电子发票" :border="true" />
            <!-- 银行卡号 -->
            <van-field v-model="bankCard" label="银行卡号" placeholder="必须是法人的银行卡号" :border="true" />
            <!-- 银行名称 -->
            <van-field v-model="bankName" label="银行名称" placeholder="银行名称及支行" :border="true" />
            <div class="btn">
                <van-button @click="apply" data-name="/pages/User/AddIndividualBusiness/AddIndividualBusiness" block type="primary">重新提交</van-button>
            </div>
        </div>

        <van-overlay :show="show" @click="show = false">
            <div class="flex center" style="width: 100%;height: 100%">
                <img :src="url" style="width: 100%;margin: auto 0" mode="widthFix"/>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Button , Overlay , Uploader , Field , Cell } from 'vant';
export default {
    components: {
        [Button.name]: Button,
        [Overlay.name]: Overlay,
        [Uploader.name]: Uploader,
        [Field.name]: Field,
        [Cell.name]: Cell,
    },
    setup() {
        const { proxy } = getCurrentInstance();

        const detail = JSON.parse(proxy.$route.params.item);

        const url = ref('');
        const show = ref(false);
        const showImg = (item) =>{
            url.value = item;
            show.value = true;
        }

        // 查看行业
        const industryDetail = () => {
            proxy.$router.push({name: 'industrialParkDetail',params: {'laborCompanyId': JSON.stringify(detail.laborCompanyId),'industry': encodeURIComponent(JSON.stringify(detail.industry)),'isAdd': '0'}})
        }

        const idCardFront = ref(''); // 身份证正面照
        const idCardBack = ref(''); // 身份证反面照
        const oneInchPhoto = ref(''); // 一寸照
        // 上传文件
        const afterRead = (file,detail) => {
            console.log(detail,'detail')
            console.log(file)
            let name = detail.name;
            const formData = new FormData();
            formData.append('multipartFile', file.file);
            proxy.$http.industrialApi.uploadFile(formData)
            .then(res => {
                if(res.success){
                    var data = res.data;
                    switch (name) {
                        case 'fornt':
                            idCardFront.value = res.data;
                            break;
                        case 'back':
                            idCardBack.value = res.data;
                            break;
                        case 'oneInch':
                            oneInchPhoto.value = res.data;
                            break;
                        default:
                            break;
                    }
                }else{
                    proxy.showToast(res.errMessage);
                }
            })
        }

        // 身份信息
        const realName = ref(''); // 姓名
        const idCard = ref(''); // 身份证号
        const mobile = ref(''); // 手机号
        const bankName = ref(''); // 银行名称
        const bankCard = ref(''); // 银行卡号
        const email = ref(''); // 邮箱
        const checked = ref(false); // 

        // 确认申请
        const apply = () => {
            if(idCardFront.value == ''){
                proxy.showToast({message: '请上传经营者身份证正面照！'})
                return;
            }
            if(idCardBack.value == ''){
                proxy.showToast({message: '请上传经营者身份证反面照！'})
                return;
            }
            if(oneInchPhoto.value == ''){
                proxy.showToast({message: '请上传经营者一寸证照！'})
                return;
            }
            if(realName.value == ''){
                proxy.showToast({message: '请输入姓名'})
                return;
            }
            if(idCard.value == ''){
                proxy.showToast({message: '请输入身份证号码'})
                return;
            }
            if(mobile.value == ''){
                proxy.showToast({message: '请输入法人联系手机号'})
                return;
            }
            if(email.value == ''){
                proxy.showToast({message: '请输入电子邮箱'})
                return;
            }
            if(bankCard.value == ''){
                proxy.showToast({message: '请输入银行卡号'})
                return;
            }
            if(bankName.value == ''){
                proxy.showToast({message: '请输入银行名称'})
                return;
            }
            proxy.$http.industrialApi.saveSelfEmplooyed({laborCompanyId: detail.laborCompanyId,industry: detail.industry,realName: realName.value,idCard: idCard.value,mobile: mobile.value,email: email.value,bankCard: bankCard.value,bankName: bankName.value,oneInchPhoto: oneInchPhoto.value,idCardFront: idCardFront.value,idCardBack: idCardBack.value,id: detail.id})
            .then(res => {
                if(res.success){
                    proxy.showToast({message: '提交成功'})
                    history.go(-1);
                }else{
                    proxy.showToast({
                        message: res.errMessage,
                    })
                }
            })
        }

        return {
            detail,
            idCardFront,
            idCardBack,
            afterRead,
            oneInchPhoto,
            realName,
            idCard,
            mobile,
            bankName,
            bankCard,
            email,
            apply,
            showImg,
            url,
            show,
            industryDetail,
        }
    }
}

</script>
<style scoped>
.head{
    margin: 10px;
    padding: 12px 12px;
    background: #FFFFFF;
    border-radius: 5px;
}
.cont{
    margin: 0 10px;
    padding: 12px 12px;
    background: #FFFFFF;
    border-radius: 5px;
}
.resItem{
    padding: 5px 0;
}
.businessLicense{
    width: 100%;
}
.item{
    padding: 12px 0;
    margin: 0 12px;
}
.label{
    font-size: 14px;
    font-weight: 500;
}
.imgDesc{
    font-size: 12px;
    margin-top: 5px;
    color: #999999;
}
.btn{
    margin: 10px 75px;
}

/* 状态 */
.state{
    font-size: 20px;
    font-weight: 500;
}
.state1{
    color: orange;
}
.state2{
    color: green;
}
.state3{
    color: red;
}

.idcardImg{
    width: 170px;
    height: 100px;
}
</style>